<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI2Word - AI技术公众号助手</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.snow.css">
</head>
<body>
    <div id="app">
        <!-- 顶部导航 -->
        <header class="header">
            <div class="header-content">
                <h1 class="logo">AI2Word</h1>
                <nav class="nav-tabs">
                    <button class="nav-tab active" data-tab="topics">主题管理</button>
                    <button class="nav-tab" data-tab="generate">内容生成</button>
                    <button class="nav-tab" data-tab="history">历史记录</button>
                    <button class="nav-tab" data-tab="settings">设置</button>
                </nav>
            </div>
        </header>

        <!-- 主题管理页面 -->
        <div id="topics-tab" class="tab-content active">
            <div class="container">
                <div class="section">
                    <h2>创建新主题</h2>
                    <div class="topic-input-section">
                        <div class="input-group">
                            <input type="text" id="manual-topic" placeholder="手动输入技术主题，如：详解Spring Boot 3.1的新特性">
                            <button id="use-manual-topic" class="btn btn-primary">使用此主题</button>
                        </div>
                        <div class="divider">或</div>
                        <button id="generate-topics" class="btn btn-secondary">AI推荐主题</button>
                    </div>
                </div>

                <div class="section">
                    <h2>推荐主题</h2>
                    <div id="recommended-topics" class="topics-grid">
                        <div class="loading-placeholder">点击"AI推荐主题"获取推荐</div>
                    </div>
                </div>

                <div class="section">
                    <h2>历史主题</h2>
                    <div id="historical-topics" class="topics-grid">
                        <div class="loading-placeholder">暂无历史主题</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 内容生成页面 -->
        <div id="generate-tab" class="tab-content">
            <div class="generate-layout">
                <!-- 左侧参数设置 -->
                <div class="sidebar">
                    <h3>生成参数</h3>
                    
                    <div class="param-group">
                        <label>当前主题</label>
                        <div id="current-topic" class="current-topic">请先选择主题</div>
                    </div>

                    <div class="param-group">
                        <label for="article-length">文章长度</label>
                        <select id="article-length">
                            <option value="short">短文 (800-1200字)</option>
                            <option value="normal" selected>普通 (1500-2500字)</option>
                            <option value="long">长文 (3000-5000字)</option>
                        </select>
                    </div>

                    <div class="param-group">
                        <label for="writing-style">写作风格</label>
                        <select id="writing-style">
                            <option value="accessible">通俗易懂</option>
                            <option value="professional" selected>专业严谨</option>
                            <option value="humorous">幽默风趣</option>
                        </select>
                    </div>

                    <div class="param-group">
                        <label for="keywords">关键词 (可选)</label>
                        <input type="text" id="keywords" placeholder="用逗号分隔多个关键词">
                    </div>

                    <div class="param-group">
                        <label>
                            <input type="checkbox" id="include-code" checked>
                            包含代码示例
                        </label>
                    </div>

                    <div class="action-buttons">
                        <button id="generate-article" class="btn btn-primary">生成文章</button>
                        <button id="stop-generation" class="btn btn-secondary" disabled>停止生成</button>
                    </div>
                </div>

                <!-- 右侧内容区域 -->
                <div class="main-content">
                    <div class="content-header">
                        <h3>文章内容</h3>
                        <div class="content-actions">
                            <button id="regenerate" class="btn btn-secondary" disabled>重新生成</button>
                            <button id="export-word" class="btn btn-success" disabled>导出Word</button>
                        </div>
                    </div>
                    
                    <div id="article-editor">
                        <div class="editor-placeholder">
                            <p>请选择主题并点击"生成文章"开始创作</p>
                        </div>
                    </div>

                    <div id="generation-status" class="status-bar" style="display: none;">
                        <div class="status-text">正在生成文章...</div>
                        <div class="progress-bar">
                            <div class="progress-fill"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 历史记录页面 -->
        <div id="history-tab" class="tab-content">
            <div class="container">
                <div class="section">
                    <h2>文章历史</h2>
                    <div class="history-controls">
                        <input type="text" id="history-search" placeholder="搜索文章标题或主题...">
                        <button id="refresh-history" class="btn btn-secondary">刷新</button>
                    </div>
                    <div id="article-history" class="history-list">
                        <div class="loading-placeholder">正在加载历史记录...</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 设置页面 -->
        <div id="settings-tab" class="tab-content">
            <div class="container">
                <div class="section">
                    <h2>AI配置</h2>
                    <div class="settings-group">
                        <div class="setting-item">
                            <label for="ai-provider">AI服务提供商</label>
                            <select id="ai-provider">
                                <option value="openai">OpenAI (GPT)</option>
                                <option value="claude">Anthropic (Claude)</option>
                                <option value="deepseek">DeepSeek</option>
                                <option value="wenxin">百度文心一言</option>
                            </select>
                        </div>

                        <div class="setting-item">
                            <label for="api-key">API密钥</label>
                            <input type="password" id="api-key" placeholder="请输入您的API密钥">
                        </div>

                        <div class="setting-item">
                            <label for="api-base-url">API基础URL (可选)</label>
                            <input type="text" id="api-base-url" placeholder="自定义API端点，留空使用默认">
                        </div>
                    </div>
                </div>

                <div class="section">
                    <h2>默认设置</h2>
                    <div class="settings-group">
                        <div class="setting-item">
                            <label for="default-style">默认写作风格</label>
                            <select id="default-style">
                                <option value="accessible">通俗易懂</option>
                                <option value="professional">专业严谨</option>
                                <option value="humorous">幽默风趣</option>
                            </select>
                        </div>

                        <div class="setting-item">
                            <label for="default-length">默认文章长度</label>
                            <select id="default-length">
                                <option value="short">短文</option>
                                <option value="normal">普通</option>
                                <option value="long">长文</option>
                            </select>
                        </div>

                        <div class="setting-item">
                            <label>
                                <input type="checkbox" id="auto-save">
                                自动保存生成的文章
                            </label>
                        </div>
                    </div>
                </div>

                <div class="section">
                    <h2>界面设置</h2>
                    <div class="settings-group">
                        <div class="setting-item">
                            <label for="theme">主题</label>
                            <select id="theme">
                                <option value="light">浅色</option>
                                <option value="dark">深色</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="settings-actions">
                    <button id="save-settings" class="btn btn-primary">保存设置</button>
                    <button id="reset-settings" class="btn btn-secondary">重置为默认</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 模态框 -->
    <div id="modal" class="modal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modal-title">标题</h3>
                <button class="modal-close">&times;</button>
            </div>
            <div class="modal-body" id="modal-body">
                内容
            </div>
            <div class="modal-footer">
                <button id="modal-confirm" class="btn btn-primary">确认</button>
                <button id="modal-cancel" class="btn btn-secondary">取消</button>
            </div>
        </div>
    </div>

    <!-- 加载Quill编辑器和应用脚本 -->
    <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
    <script src="app.js"></script>
</body>
</html>